<!-- 搜索组件 -->
<template>
    <view>
        <!-- 占位布局 -->
        <view :style="{height: getHeadHeight() + 'px'}"></view>
        <!-- 搜索框布局 -->
        <view class="box-search box-position-fixed-top-left">
            <!-- 手机状态栏占位布局 -->
            <view :style="{height: getMenuButtonBoundingClientRectMarginTop() + 'px'}"></view>
            <!-- 搜索框组件布局 -->
            <view class="box-search-content box-flex-center-y"
                :style="{height: getMenuButtonBoundingClientRectHeight() + 'px'}" @click="onSearch">
                <uni-icons type="search" size="30"></uni-icons>
                <view>搜索</view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    //导入
    import { getMenuButtonBoundingClientRectMarginTop, getMenuButtonBoundingClientRectHeight, getHeadHeight } from "@/utils/system.ts";
    import { navigateTo } from "@/utils/uni-api.ts";
    import { url_search_detail } from "@/utils/url.ts";

    //内部事件
    //点击搜索
    function onSearch() {
        navigateTo({ url: url_search_detail });
    };
</script>

<style lang="scss" scoped>
    @import "@/common/css/common.css";

    .box-search {
        width: 100%;
        z-index: 1;
        padding: 0 30rpx 30rpx;
        background: $custom-color-white;

        .box-search-content {
            width: 60vw;
            border: 1px solid $custom-color-black;
            background: $custom-color-white;
            border-radius: 10rpx;
            padding-left: 10rpx;
        }
    }
</style>